import React, { useState } from'react';
import { useNavigate } from'react-router-dom';

export default function Search() {
    const navigate = useNavigate();
    const [searchHistory, setSearchHistory] = useState<string[]>([]);
    const [inputValue, setInputValue] = useState<string>('');

    const handleBack = () => {
        navigate(-1);
    };

    const clearHistory = () => {
        setSearchHistory([]);
    };

    const deleteHistory = (index: number) => {
        setSearchHistory(prev => prev.filter((_, i) => i!== index));
    };

    const handleSearch = () => {
        if (inputValue.trim() === '') return;
        // 去重并添加新搜索词到历史记录
        const newHistory = [inputValue,...searchHistory.filter(h => h!== inputValue)];
        setSearchHistory(newHistory);
        setInputValue(''); // 清空输入框
    };

    return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{
                display: 'flex',
                alignItems: 'center',
                gap: 10,
                padding: '0 10px',
                height: 40
            }}>
                <button
                    style={{
                        background: 'none',
                        border: 'none',
                        fontSize: '18px',
                        padding: 0
                    }}
                    onClick={handleBack}
                >
                    &lt;
                </button>
                <input
                    type="text"
                    placeholder="请输入搜索关键词"
                    value={inputValue}
                    onChange={(e) => setInputValue(e.target.value)}
                    style={{
                        flex: 1,
                        height: '100%',
                        border: '1px solid #ddd',
                        borderRadius: 4,
                        padding: '0 12px',
                        fontSize: '14px',
                        outline: 'none'
                    }}
                />
                <button
                    style={{
                        background: 'none',
                        border: 'none',
                        color: '#1a0dab',
                        fontSize: '14px'
                    }}
                    onClick={handleSearch}
                >
                    搜索
                </button>
            </div>
            {searchHistory.length > 0 && (
                <div style={{ width: '100%', borderTop: '1px solid #eee' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px' }}>
                        <span>历史记录</span>
                        <button
                            style={{
                                background: 'none',
                                border: 'none',
                                padding: 0,
                                color: '#666'
                            }}
                            onClick={clearHistory}
                        >
                            <i className="fas fa-trash" />
                        </button>
                    </div>
                    {searchHistory.map((item, index) => (
                        <div
                            key={index}
                            style={{
                                display: 'flex',
                                justifyContent: 'space-between',
                                alignItems: 'center',
                                padding: '5px 10px',
                                borderBottom: '1px solid #eee'
                            }}
                        >
                            <span>{item}</span>
                            <button
                                style={{
                                    background: 'none',
                                    border: 'none',
                                    padding: 0,
                                    color: '#666',
                                    fontSize: '12px'
                                }}
                                onClick={() => deleteHistory(index)}
                            >
                                ×
                            </button>
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
}